<template>
  <f7-page>
    <div
      style="
        width: 100%;
        padding: calc(20px * var(--ratio)) calc(32px * var(--ratio));
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #000;
      "
    >
      <div class="left">
        <f7-link back
          ><f7-icon f7="chevron_left" style="color: #000"></f7-icon
        ></f7-link>
      </div>
      <div class="title">首页</div>
      <div class="right">
        <f7-link><f7-icon f7="ellipsis" style="color: #000"></f7-icon></f7-link>
      </div>
    </div>

    <f7-block>
      <qm-field
        label="多选"
        placeholder="请选择"
        readonly
        input-align="right"
        :is-link="true"
        @click="open('multiple')"
        v-model="result_1"
      />
      <qm-field
        label="单选"
        placeholder="请选择"
        readonly
        input-align="right"
        :is-link="true"
        @click="open('single')"
        v-model="result_2"
      />
    </f7-block>
    <f7-actions ref="datetimePicker" class="action">
      <f7-actions-group>
        <f7-block v-if="type === 'multiple'">
          <qm-multiple-choice
            key="choice1"
            @confirm="getResult"
            @cancel="cancel"
            :data="data"
            :type="type"
          ></qm-multiple-choice>
        </f7-block>
        <f7-block v-else>
          <qm-multiple-choice
            key="choice2"
            @confirm="getResult"
            @cancel="cancel"
            :data="data"
            :type="type"
          ></qm-multiple-choice>
        </f7-block>
      </f7-actions-group>
    </f7-actions>
  </f7-page>
</template>

<script>
export default {
  data() {
    return {
      data: [
        "简介",
        "排课管理",
        "班委名单",
        "教学材料",
        "培训成果",
        "教学质量",
        "师资管理",
        "证书管理",
        "班级经费",
      ],
      result_1: "",
      result_2: "",
      type: "multiple",
    };
  },
  methods: {
    getResult(e) {
      console.log(e);
      if (this.type === "multiple") this.result_1 = e.join(",");
      else this.result_2 = e.join(",");

      this.cancel();
    },
    open(type) {
      console.log("open");
      this.type = type;
      this.$refs.datetimePicker.open();
    },
    cancel() {
      this.$refs.datetimePicker.close();
    },
  },
};
</script>

<style lang="less" scoped>
.action {
  background: #fff;
  border-radius: calc(16px * var(--ratio)) calc(16px * var(--ratio)) 0 0;
}
</style>